import React from 'react'
import {Button, Modal} from '@/components'

class ModelDemo extends React.Component {
	modalA = Symbol('modalA')

	modalB = 'modalB'

	componentWillMount() {

	}

	handleModel1() {
		Modal.confirm({
			title: '呵呵',
			content: `我来也`,
			onOk: () => {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve(true)
					}, 2000)
				})
			},
			onCancel: () => {

			}
		})
		Modal.alert('我在来')
	}

	handleModel2() {
		Modal.alert('说了地方技术都否')
	}

	handleModel3() {
		Modal.info('说了地方技术都否')
	}

	handleModel4() {
		Modal.warn('说了地方技术都否')
	}

	handleModel5() {
		Modal.error('说了地方技术都否')
	}

	handleModel6() {
		Modal.success('说了地方技术都否')
	}

	handleModel1Ok() {

		return new Promise(resolve => {
			setTimeout(() => {
				resolve()
			}, 3000)
		})
	}


	render() {

		return <div>
			<div className="btn-group">
				<Button modal={this.modalA}>打开对话框1</Button>
				<Button onClick={this.handleModel1.bind(this)}>Confirm</Button>
				<Button onClick={this.handleModel2.bind(this)}>Alert</Button>
				<Button onClick={this.handleModel3.bind(this)}>Info</Button>
				<Button onClick={this.handleModel4.bind(this)}>Warn</Button>
				<Button onClick={this.handleModel5.bind(this)}>Error</Button>
				<Button onClick={this.handleModel6.bind(this)}>Success</Button>
			</div>
			<br/>
			<Modal name={this.modalA} height={300} width="33%" onOk={this.handleModel1Ok.bind(this)}
				   overlayerClose={false}>
				<p>我是对话框内容111</p>
				<p>我是对话框内容111</p>
				<p>我是对话框内容111</p>
				<p>我是对话框内容111</p>
			</Modal>
		</div>
	}
}

export default ModelDemo